<%inherit file="base.html"/>
<%def name="head()">
<script src="/static/js/highcharts.js"></script>
<script src="/static/js/charttheme.js"></script>
<script src="/static/js/exporting.js"></script>
<script>

function clean_cache() {
    $.get("/admin/cache/clean", {}, function (data) {
        alert(data.msg)
        window.location.reload();
    }, "json");
}

function clean_trace() {
    $.get("/admin/trace/clean", {}, function (data) {
        alert(data.msg)
        window.location.reload();
    }, "json");
}

function busy(flag) {
    if (flag) {
        $("#loading").show();
        $("#inbox").html("")
        $("#inbox").hide();
    } else {
        $("#loading").hide();
        $("#inbox").show();
    }
}

var msgstat_options = {
    credits : {enabled:false},
    chart: {type: 'areaspline',renderTo: 'msgstat-chart',height:300},
    title: {text: '最近15分钟的消息统计'},
    xAxis: {type: 'datetime',tickInterval : 60*1000},
    yAxis: {title: {text: '消息量'},
        labels: {formatter: function() {return this.value;}}              
    },
    tooltip: {shared: true},
    legend: {
                layout: 'vertical',
                align: 'left',
                verticalAlign: 'top',
                x: 150,
                y: 100,
                floating: true,
                borderWidth: 1,
                backgroundColor: '#FFFFFF'
            },  
    plotOptions: {areaspline: {
        marker: {enabled: false,symbol: 'circle',radius: 2,states: {hover: {enabled: true}}},
        fillOpacity: 0.2
    }},           
    series: [{},{},{},{}]
};

var msgstat_chart;
var mstimer;

function updateMsgChart(data){
    console.log(data)
    for (p in data){
        $("#"+p).html(data[p])
    }
    var auth_req_stat = {name:'认证请求消息',data:data.auth_req_stat};
    var auth_resp_stat = {name:'认证响应消息',data:data.auth_resp_stat};
    var acct_req_stat = {name:'计费请求消息',data:data.acct_req_stat};
    var acct_resp_stat = {name:'计费响应消息',data:data.acct_resp_stat};
    msgstat_chart.series[0].update(auth_req_stat) ;
    msgstat_chart.series[1].update(auth_resp_stat) ;
    msgstat_chart.series[2].update(acct_req_stat) ;
    msgstat_chart.series[3].update(acct_resp_stat) ;
}

function updateMsgStat()
{
    if(!msgstat_chart)
    {
        msgstat_chart = new Highcharts.Chart(msgstat_options);
    }
    if(mstimer)
    {
        clearTimeout(mstimer);
    }
    $.get("/admin/dashboard/msgstat", function (data) {
        updateMsgChart(data);
    },"json");
    mstimer = setTimeout("updateMsgStat()", 10000);
}


function update() {
    busy(true);
    $.post("/admin/dashboard/update", {_xsrf: '${handler.xsrf_token}'}, function (data) {
        $("#status_line").html(data.value)
        busy(false);
    },"json");
}


var online_options = {
    credits : {enabled:false},
    chart: {type: 'areaspline',renderTo: 'online-chart',height:300},
    title: {text: '在线用户统计'},
    subtitle: {text: '${"%s 00:00:00 -- %s 23:59:59"%(utils.get_currdate(),utils.get_currdate())}'},
    xAxis: {type: 'datetime',tickInterval : 7200*1000},
    yAxis: {
        title: {text: '在线数'},
        labels: {formatter: function() {return this.value + '人';}}            
    },
    tooltip: {shared: true},
    legend: {enabled: false},    
    plotOptions: {areaspline: {
        stacking: 'normal',
        marker: {enabled: false,symbol: 'circle',radius: 2,states: {hover: {enabled: true}}},
        fillOpacity: 0.4
    }},           
    series: [{}]
};

function update_online()
{
    $.get("/admin/dashboard/onlinestat", {day_code:'${utils.get_currdate()}'} , function (ev) {
        if (ev.code == 0) {
            online_options.series = ev.data;
            new Highcharts.Chart(online_options);
        }
    }, "json");
}


var flow_options = {
    credits : {enabled:false},
    chart: {type: 'areaspline',renderTo: 'flow-chart',height:300},
    title: {text: '在线流量统计'},
    subtitle: {text: '10分钟内流量统计数据'},
    xAxis: {type: 'datetime',tickInterval : 60*1000},
    yAxis: {title: {text: '使用流量'},
        labels: {format:'{value:.2f}',formatter: function() {return this.value + 'MB';}}            
    },
    tooltip: {shared: true, valueSuffix: 'MB'},
    legend: {
                layout: 'vertical',
                align: 'left',
                verticalAlign: 'top',
                x: 150,
                y: 100,
                floating: true,
                borderWidth: 1,
                backgroundColor: '#FFFFFF'
            },  
    plotOptions: {areaspline: {
        marker: {enabled: false,symbol: 'circle',radius: 2,states: {hover: {enabled: true}}},
        fillOpacity: 0.4
    }},           
    series: [{}]
};

function update_flow()
{
    $.get("/admin/dashboard/flowstat", {day_code:'${utils.get_currdate()}'} , function (ev) {
        if (ev.code == 0) {
            flow_options.series = ev.data;
            new Highcharts.Chart(flow_options);
        }
    }, "json");
}




function restart() {
    busy(true);
    $.ajax({
        url: '/admin/dashboard/restart',
        data:{_xsrf: '${handler.xsrf_token}'},
        dataType:"json",
        type: 'POST',
        timeout: 9000,
        error: function (xhr, textStatus) {
            busy(false);
            update()
        },
    });
    setTimeout("update()", 9000);
}


$(document).ready(function () {
    Highcharts.setOptions({global: {useUTC: false}});
    $("#loading").hide();
    $("#inbox").hide();

    $("#restart").click(function () {
        restart();
    });

    $("#refresh").click(function () {
        update()
    });
    updateMsgStat();
    update_online();
    update_flow();
});

</script>
<style type="text/css">
    .break-all {
        word-break: break-all; /*必須*/
    }
</style>
</%def>


<%def name="body()">
<section class="content">
    <div class="box box-default">
        <div class="box-header">
            <i class="fa fa-dashboard"></i>
            <h3 class="box-title">控制面板</h3>
        </div>
        <div class="box-body">
            <div class="container">
            <table class="table table-hover">
                <thead>
                <tr>
                    <th colspan="4"> <i class="fa fa-user"></i> 当前登录管理员</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>登录管理员</td>
                    <td>${current_user.username}</td>
                    <td>登录时间</td>
                    <td>${current_user.login_time}</td>
                </tr>
                <tr>
                    <td colspan="2">登录IP地址</td>
                    <td>${current_user.ipaddr or ''}</td>
                </tr>
                </tbody>
                <thead>
                <tr>
                    <th colspan="4"> <i class="fa fa-laptop"></i> 系统状态信息</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>系统版本</td>
                    <td>${sys_version or '1.0'}</td>
                    <td>SID</td>
                    <td>${sys_uuid}</td>
                </tr>
                <tr>
                    <td width=15% >cpu使用率</td>
                    <td width=35% class="break-all">${'; '.join([ 'cpu%s: %s/%%'%(cpuuse.index(c),c)  for c in cpuuse])}</td>
                    <td width=15% >内存使用率</td>
                    <td width=35% >${memuse.percent}% ;  ${int((memuse.total-memuse.available)/1024.0/1024.0)}MB / ${int(memuse.total/1024.0/1024.0)}MB</td>                    
                </tr>
                <tr>
                    <td>磁盘使用率</td>
                    <td colspan="3">${diskuse}</td>
                </tr>
                </tbody>
                <thead>
                <tr>
                    <th colspan="4"> <i class="fa fa-hdd-o"></i>  缓存信息 </th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>缓存总数</td>
                    <td>${handler.cache.count()} </td>
                    <td>缓存命中率</td>
                    <td>${cache_rate()} %  </td>
                </tr>      
                <tr>
                    <td>系统消息缓存列表数</td>
                    <td>${handler.logtrace.count()} </td>
                    <td></td>
                    <td></td>
                </tr>     
                % if current_user.opr_type == 0:           
                <tr>
                    <td colspan="4">
                    <a href="javascript:clean_cache();" class="btn btn-sm btn-default"><i class="fa fa-refresh"></i> 刷新系统缓存</a> 
                    <a href="javascript:clean_trace();" class="btn btn-sm btn-default"><i class="fa fa-refresh"></i> 刷新系统消息缓存</a>
                    </td>
                </tr>
                % endif
                </tbody>
            </table>

            <hr>
            <div id="loading" style="display: none;"><img style="max-height: 90px;width: auto;"
                                                          src="/static/img/loading.gif"></div>
            <div id="inbox" class="text-info" style="height:120px;overflow:auto"></div>


            
        </div>
    </div>
 </div>


    <div class="box box-default">
        <div class="box-header">
            <i class="fa fa-area-chart"></i>
            <h3 class="box-title">消息统计</h3>
            <div class="bar pull-right">
                <a href="javascript:updateMsgStat();">刷新数据</a>
            </div>
        </div>
        <div class="box-body">
            <div class="container">
                <div class="panel-body">
                    <div class="container center" id="msgstat-chart"> </div>
                    <br>
                    <div id="msgstat_list">
                    <ul class="list-group col-md-6">
                        <li class="list-group-item">
                            <span class="badge" id="auth_req"></span>
                            认证请求总数
                        </li>
                        <li class="list-group-item">
                            <span class="badge" id="auth_accept"></span>
                            认证成功总数
                        </li>
                        <li class="list-group-item">
                            <span class="badge" id="auth_reject"></span>
                            认证拒绝总数
                        </li>
                        <li class="list-group-item">
                            <span class="badge" id="auth_drop"></span>
                            认证丢弃总数
                        </li>
                    </ul>
                    <ul class="list-group col-md-6">
                        <li class="list-group-item">
                            <span class="badge" id="acct_start"></span>
                            记账上线总数
                        </li>
                        <li class="list-group-item">
                            <span class="badge" id="acct_update"></span>
                            记账更新总数
                        </li>
                        <li class="list-group-item">
                            <span class="badge" id="acct_stop"></span>
                            记账下线总数
                        </li>
                         <li class="list-group-item">
                            <span class="badge" id="acct_resp"></span>
                            记账响应总数
                        </li>
                        <li class="list-group-item">
                            <span class="badge" id="acct_drop"></span>
                            记账丢弃总数
                        </li>
                    </ul>
                    </div>

                </div>
            </div>

                    <div class="container">
                    <div class="well well-sm">
                        最高请求峰值(10秒均值)： <span id="last_max_req"></span>/每秒, 发生在 <span id="last_max_req_date"></span>; 
                        最高响应峰值(10秒均值)： <span id="last_max_resp"></span>/每秒, 发生在 <span id="last_max_resp_date"></span> 
                    </div>
                    </div>
        </div>
        </div>

    <div class="box box-default">
        <div class="box-header">
            <i class="fa fa-area-chart"></i>
            <h3 class="box-title">在线统计</h3>
            <div class="bar pull-right">
                        <a href="javascript:update_online();">刷新数据</a>
            </div>
        </div>
        <div class="box-body">
            <div class="container center" id="online-chart">  </div>
            <div class="container">
            <div class="well well-sm">
                当前在线用户数 ${online_count}/${user_total}
            </div>
            </div>
        </div>
    </div>

    <div class="box box-default">
        <div class="box-header">
            <i class="fa fa-area-chart"></i>
            <h3 class="box-title">流量统计</h3>
            <div class="bar pull-right">
                <a href="javascript:update_flow();">刷新数据</a>
            </div>
        </div>
        <div class="box-body">
            <div class="container center" id="flow-chart">  </div>
        </div>
    </div>
</section>
</%def>

